<template>
	<view class="map">
		<!-- 自定义标题 -->
		<tn-custom bgColor="bg-gradual-blue">
			<block slot="left">
				<navigator class='action border-custom' open-type="navigateBack" :delta="1" hover-class="none"
					:style="'width:' + Custom.width + 'px;height:' + Custom.height + 'px;margin-left:calc(750rpx - ' + Custom.right + 'px)'">
					<text class='cuIcon-back'></text>
					<text class='cuIcon-homefill'></text>
				</navigator>
			</block>
			<block slot="content">地图查询</block>
		</tn-custom>

		<!-- 地图显示容器 -->
		<view class="page-body">
			<map class="map" id="myMap" ref="myMap" show-compass style="width:100%;height:65vh" @markertap="markertap"
				:latitude="latitude" :longitude="longitude" :markers="covers" :scale="scale"
				:show-location="show_location" :enable-traffic="isTraffic"></map>
		</view>

		<!-- 操作 -->
		<view class="operation">
			<view class="operation-item" @click="refresh">
				<u-icon name="reload" color="#999" size="24" style="text-align: center;"></u-icon>
				<view>刷新</view>
			</view>
			<view class="operation-item" @click="getLocation">
				<image src="@/static/icon/e_zhongxin.png" mode=""></image>
				<view>中心</view>
			</view>
			<view class="operation-item" @click="traffic">
				<image src="@/static/icon/e_lukuang.png" mode=""></image>
				<view>路况</view>
			</view>
		</view>

		<!-- 底部搜索区域 -->
		<view class="gas-station">
			<view class="gas-station-arrow" @click="upView" style="padding: 24rpx;" @touchmove="handletouchmove"
				@touchstart="handletouchstart" @touchend="handletouchend">
				<u-icon v-if="showList" color="#999" name="arrow-down" size="20"></u-icon>
				<u-icon v-else name="arrow-up" color="#999" size="20"></u-icon>
			</view>

			<view class="search-box" style="padding: 16rpx 30rpx;">
				<u-search bg-color="FFFFFF" border-color="#F0F0F0" height="40" placeholder="搜索周边" action-text="取消"
					v-model="keywords" shape="round" :show-action="actionShow" @custom="seachCancel" @search="search">
				</u-search>
			</view>
			<view v-if="noSearchResult" style="text-align: center;margin-top: 30rpx;">暂无搜索结果</view>
			<view class="station-list" :style="{ height: `${showList ? 860 : initHeight}rpx` }">
				<scroll-view scroll-y="true" :style="{ height: `${showList ? 830 : initHeight}rpx` }">
					<view class="item" v-for="item in stationList" :key="item.id">
						<view class="item-img">
							<image :src="item.photos.length<=0?'../static/morent.png':item.photos[0].url" mode="">
							</image>
						</view>
						<view class="item-info">
							<view class="item-title">{{ item.name }}</view>
							<view class="item-nav">
								<view>距离:<text>{{ item.distance/1000 |formatLatlon}}km</text></view>
								<view>电话:<text>{{ item.tel || '暂无'}}</text></view>
								<view class="btn-nav" @click="navClick(item.location,item)">导航</view>
							</view>
							<view>地址:{{ item.address || '暂无'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import GeocodeUtils from '../js/geocode-utils.js'
	import tnCustom from '../component/colorui/components/TnCustom.vue'
	export default {
		components: {
			tnCustom
		},
		data() {
			return {
				noSearchResult: false,
				Custom: this.Custom,
				initHeight: 340,
				navIndex: 0,
				map: '',
				latitude: 24.302593,
				longitude: 116.12116,
				scale: 12,
				covers: [],
				isTraffic: false,
				show_location: false,
				keywords: '',
				stationList: [],
				showList: false,
				actionShow: false,
				flag: 0,
			};
		},
		onReady() {
			this.map = uni.createMapContext('myMap');
		},
		onLoad() {
			this.keywords = '足浴'
		},
		mounted() {
			this.getLocation();
		},
		filters: {
			// 过滤搜索项结果的距离
			formatLatlon(val) {
				if (typeof(val) === "number") {
					return parseFloat(val).toFixed(2)
				}
				return 0.00;
			}
		},
		methods: {
			//点击标注事件
			markertap(e) {
				console.log(e);
				// let {
				// 	markerId
				// } = e.detail;
				// let item = this.covers.find(v => v.id === markerId);
				// console.log(this.covers)
				// console.log('item', item)
				// if (item && item.vehicleNo) {
				// 	uni.navigateTo({
				// 		url: `./realTimeMonitoringDetail?vehicleNo=${item.vehicleNo}`
				// 	});
				// }
			},
			navClick(location, item) {
				console.log('location', location)
				uni.openLocation({
					latitude: parseFloat(location.split(',')[1]),
					longitude: parseFloat(location.split(',')[0]),
					address: item.address,
					name: item.name,
					success: function() {
						console.log('success');
					},
					fail(err) {
						console.log("错误", err);
					}
				});
			},
			upView() {
				this.showList = !this.showList;
			},
			// 刷新
			refresh() {
				this.getPoiAround();
			},
			//当前位置
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						console.log('获取当前用户坐标', res)
						let {
							latitude,
							longitude
						} = res;
						GeocodeUtils.amapGeocode(
							latitude,
							longitude,
							data => {
								console.log('用户当前位置解析位置成功:', data)
								const result = data[0]
								uni.request({
									url: `${this.$baseUrl}/location`,
									method: 'post',
									data: {
										desc: result.desc || '',
										name: result.name || '',
										latitude: result.latitude || '',
										longitude: result.longitude || '',
										formatted_address: result.regeocodeData
											.formatted_address || ''
									},
									success: (res) => {
										console.log('上报成功', res);
									}
								})
							}
						)
						// 设置中心
						this.latitude = latitude;
						this.longitude = longitude;
						this.getPoiAround()
						// 地图聚焦
						let offset = 0.005;
						let points = [{
								latitude: latitude + offset,
								longitude: longitude + offset
							},
							{
								latitude: latitude - offset,
								longitude: longitude - offset
							}
						];
						this.map.includePoints({
							points
						});
					},
					fail(err) {
						console.log('err', err);
					}
				});
				this.show_location = true;
			},
			getPoiAround() {
				GeocodeUtils.getPoiAround(this.latitude, this.longitude, this.keywords, data => {
					// console.log('反解析markers', data.markers)
					// console.log('反解析poisData', data.poisData)
					if (!(data.markers[0] && data.poisData[0])) {
						this.stationList = []
						this.noSearchResult = true
						return
					} else {
						this.noSearchResult = false
					}
					this.stationList = [];
					this.covers = [];
					data.poisData.forEach(data => {
						this.stationList.push(data);
						this.covers.push({
							latitude: data.location.split(',')[1],
							longitude: data.location.split(',')[0],
							width: 30,
							height: 30,
							callout: {
								content: this.huanhang(data.name),
								color: '#0707f7',
								fontSize: 12,
								textAlign: 'center',
								display: 'ALWAYS',
								boxShadow: '5px 5px 10px #aaa',
								borderRadius: 4,
								padding: 6,
							},
							// label: {
							// 	content: this.huanhang(data.name),
							// 	color: '#262822',
							// 	fontSize: 10,
							// 	textAlign: 'center',
							// 	x: -40
							// }
						});
					})
					this.map.includePoints({
						points: this.covers,
						padding: [50, 50, 50, 50]
					});
				})
			},
			//路况
			traffic() {
				this.isTraffic = !this.isTraffic;
			},
			// 搜索
			search() {
				this.actionShow = true;
				let value = this.keywords;
				if (!value) {
					uni.showToast({
						title: '查询内容不能为空',
						icon: 'none'
					});
					return false;
				}
				this.getPoiAround()
			},
			seachCancel() {
				this.actionShow = false;
			},

			//监听底部区域的滑动事件
			handletouchmove(event) {
				// console.log(event)
				if (this.flag !== 0) {
					return;
				}
				let currentX = event.touches[0].pageX;
				let currentY = event.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						// console.log('向左滑动');
						this.flag = 1;
						//	this.getList();  //调用列表的方法
					} else if (tx > 0) {
						text = '向右滑动';
						// console.log('向右滑动');
						this.flag = 2;
					}
				} else {
					//上下方向滑动
					if (ty < 0) {
						text = '向上滑动';
						// console.log('向上滑动');
						this.flag = 3;
						// 调整盒子高低
						uni.getSystemInfo({
							success: res => {
								this.showList = true;
							}
						});
						//	this.getList();  //调用列表的方法
					} else if (ty > 0) {
						text = '向下滑动';
						// console.log('向下滑动');
						this.flag = 4;
						// 调整盒子高低
						uni.getSystemInfo({
							success: res => {
								this.showList = false;
							}
						});
					}
				}
				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
			},
			handletouchstart(event) {
				// console.log(event)
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},
			handletouchend(event) {
				this.flag = 0;
				this.text = '没有滑动';
			},
			huanhang(s) {
				var re = '';
				var length = s.length;
				for (var i = 0, j = 1; i < length; i++, j++) {
					re += s[i];
					if (j && j % 6 == 0) {
						re += '\n';
					}
				}
				return re;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		.operation {
			width: 85rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: -1rpx 4rpx 16rpx rgba(2, 90, 221, 0.17);
			border-radius: 10rpx;
			position: absolute;
			bottom: 580rpx;
			right: 21rpx;
			padding-top: 10rpx;
			z-index: 10;

			&-item {
				text-align: center;
				margin-bottom: 10rpx;

				view {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Medium;
					line-height: 32rpx;
					color: rgba(102, 102, 102, 1);
				}
			}

			&-item:nth-child(1) {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 24rpx;
				text-align: center;

				image {
					width: 40rpx;
					height: 32rpx;
				}
			}

			&-item:nth-child(2) {
				margin-bottom: 20rpx;

				image {
					width: 39rpx;
					height: 39rpx;
				}
			}

			&-item:nth-child(3) {
				margin-bottom: 15rpx;

				image {
					width: 42rpx;
					height: 22rpx;
				}
			}
		}

		.gas-station {
			width: 100%;
			background: rgba(255, 255, 255, 1);
			box-shadow: 8rpx 0 24rpx rgba(57, 111, 250, 0.23);
			opacity: 1;
			border-radius: 20rpx 20rpx 0 0;
			position: absolute;
			bottom: 0;
			z-index: 100;

			&-arrow {
				display: flex;
				justify-content: center;
			}

			.station-list {
				padding: 0rpx 22rpx;
				transition: all 0.3s;
				overflow: hidden;

				.item {
					display: flex;
					margin-top: 10rpx;

					.item-img {
						flex-shrink: 0;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							border: 1px solid #f2f2f2;
						}
					}

					.item-info {
						width: 100%;
						padding: 5rpx 15rpx;

						text {
							color: #334BE7;
						}

						.item-title {
							font-size: 28rpx;
							font-weight: bold;
						}

						view:nth-child(2) {
							margin-top: 5rpx;
							font-size: 24rpx;
						}

						view:nth-child(3) {
							margin-top: 10rpx;
							font-size: 24rpx;
						}

						.item-nav {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.btn-nav {
								width: 100rpx;
								height: 45rpx;
								line-height: 45rpx;
								text-align: center;
								border: 1px solid #334BE7;
								border-radius: 10rpx;
								color: #334BE7;
								font-size: 24rpx;
							}
						}
					}
				}

			}
		}
	}
</style>
